<template>
    <el-container class="home-container">
        <el-header>
            <h2>阳光小区物业系统</h2>
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="logout">退出</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse ? '64px' : '200px'">

                <div class="toggle-button" @click="toggleCollapse">|||</div>
                <!-- 
                    collapse控制是否隐藏
                    collapse-transition关闭折叠动画
                    router开启路由链接,根据index的值进行跳转
                 -->
                <el-menu background-color="#404147" text-color="#fff" active-text-color="#ffd04b" unique-opened
                    :collapse="isCollapse" :collapse-transition="false" :router="true">
                    <!-- 一级菜单 -->
                    <!-- 还要判断是否有该菜单的权限 -->
                    <!-- 要将index变成字符串 -->
                    <el-submenu v-if="menuCodes.includes(firstMenu.menuCode)" :index="firstMenu.menuId+''" v-for="(firstMenu,index) in menuList" >
                        <!-- 一级菜单模板区 -->
                        <template slot="title">
                            <i :class="firstMenu.icon"></i>
                            <span>{{firstMenu.moduleLabel}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item v-if="menuCodes.includes(secondMenu.menuCode)" :index="secondMenu.url" v-for="(secondMenu,index) in firstMenu.children" >
                            <!-- 二级菜单模板区 -->
                            <template slot="title">
                                <i :class="secondMenu.icon"></i>
                                <span>{{secondMenu.moduleLabel}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getInfoApi, logoutApi } from '@/assets/api/login.js';
import { getMenuListApi } from '@/assets/api/sys-menu.js'
export default {

    name: 'Home',

    data() {
        return {
            username: '',
            isCollapse: false,
            //菜单数据
            menuList: [],
            //权限码
            menuCodes: []
        };
    },

    mounted() {
        this.getInfo();
        this.loadMenuList();
    },

    methods: {
        async logout() {
            let res = await logoutApi();
            if (res.code == 200) {
                this.$router.push("/");
                this.$message(res.msg);
                window.sessionStorage.clear();
            }
        },
        async getInfo() {
            let res = await getInfoApi();
            if (res.code == 200) {
                this.username = res.data.username;
                this.menuCodes = res.data.menus;
            }
        },
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        },
        //加载动态菜单
        async loadMenuList(){
            let res = await getMenuListApi();
            if(res && res.code==200){
                this.menuList = res.data;
            }
            console.log(this.menuList);
        }

    },
};
</script>

<style lang="less" scoped>
.home-container {
    height: 100%;

    .el-header {
        background-color: #373C41;

        h2 {
            color: #FFFFFF;
            font-size: 21px;
            font-family: '楷体';
            line-height: 60px;
            float: left;
        }

        .el-dropdown {
            float: right;
            margin-right: 70px;
            line-height: 60px;
            color: #FFFFFF;
        }
    }

    .el-aside {
        background-color: #404147;
    }

    .el-main {
        background-color: #EAEDF2;
    }

    .el-aside {
        background-color: #404147;

        .toggle-button {
            background-color: #4a5064;
            font-size: 10px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            letter-spacing: 0.2em;
            cursor: pointer;
        }

        .el-submenu {
            text-align: left;
        }

        .el-menu {
            border-right: none;
        }
    }
}
</style>